<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            border: 1px solid black;
        }

        .row {
            background-color: aquamarine;
        }

        .row:hover {
            background-color: rgb(228, 252, 197);
        }
    </style>
</head>

<body>
    <table border="1" id="user-info">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>学校</th>
                <th>简介</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
        <script>
            var tbody = document.querySelector('#user-info tbody')
            // var name = "李大锤"
            // var age = 20
            // var school = "蓝翔技校"
            // var profile = "挖掘机技术我最强"
            // var user = {
            //     name: "李大锤",
            //     age: 20,
            //     school: "蓝翔技校",
            //     profile: "挖掘机技术我最强"
            // }
            var usres = [
                {
                    name: "李大锤",
                    age: 20,
                    school: "蓝翔技校",
                    profile: "挖掘机技术我最强"
                },
                {
                    name: "王尼玛",
                    age: 23,
                    school: "新东方烹饪学校",
                    profile: "烹饪技术哪家强"
                },
                {
                    name: "泷泽萝拉",
                    age: 23,
                    school: "tokyo hot",
                    profile: "abcd"
                }
            ]
            for(var i=0; i<usres.length; i++){
                var user = usres[i]
                var html = `
                <tr class="row">
                    <td>${user.name}</td>
                    <td>${user.age}</td>
                    <td>${user.school}</td>
                    <td>${user.profile}</td>
                </tr>
                 `
                 //获取上一次循环结束之后tbody里面的html
                var rowHtml = tbody.innerHTML
                console.log(`循环第${i+1}次`)
                console.log('之前tbody 里面的html')
                console.log(rowHtml)
                 
                tbody.innerHTML =  rowHtml + html
                // tbody.innerHTML += html
            }
           
            
            

        </script>
    </table>
</body>

</html>